<template>
	<view>
		<view class="carInfo" v-for="(item,index) in carList" :key="index">
			<view class="text">{{item.carNumber}}</view>
			<view class="car_flex">
				<view class="t" @click="handleOpen(item)">
					<uni-icons class="icon" type="compose" size="16" color="#979797"></uni-icons>
					编辑
				</view>
				<view class="t" style="margin-left: 20rpx;" @click="handleRemove(item)">
					<uni-icons class="icon" type="trash" size="16" color="#979797"></uni-icons>
					删除
				</view>
			</view>
		</view>
		<view class="cont">
            <view class="c">
            	<view class="icon">
            		<image src="../../static/c.png" mode=""></image>
            	</view>
            	<view class="" @click="handleOpen()">添加车辆</view>
            </view>
		</view>
		<uni-popup ref="popup" type="bottom" @change='popchange'>
			<view class="tc">
				<view class="titles">
					{{title}}
				</view>
				<view class="flexs" @tap="plateShow = true">
					<view  >车牌号</view>
					<view class="ts" style="display: flex;align-items: center;">
						{{carNumber ? carNumber:"请输入车牌"}}
						<uni-icons type="right" size="22" color="#9F9F9F"></uni-icons>
					</view>
				</view>
				<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow = false" />
				<view class="btns" @click="handleYes">
					保存
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		carList,addCar,editCar,removeCar
	} from '../../common/http.api.js'
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue';
	export default {
		components: {
			plateInput
		},
		data() {
			return {
				carList:[],
				plateShow:false,
				plateNo: '',
				id:'',
				carNumber:'',
				title:'添加车辆',
				type:1
			};
		},
		onLoad() {
			this.getcarList()
		},
		methods:{
			popchange(e){
				if(e.show == false){
					this.plateShow = false
				}
			},
			getcarList(){
				carList().then(res=>{
					console.log(res);
					if(res.code == 200){
						this.carList = res.data
					}
				})
			},
			handleRemove(item){
				removeCar({id:item.id}).then(res=>{
					console.log(res);
					this.getcarList()
				})
			},
			
			setPlate(e){
				this.carNumber = e
				this.plateShow = false
			},
			handleOpen(item){
				if(item){
					this.type = 2
					this.id = item.id
					this.carNumber = item.carNumber
					this.title = '编辑车辆'
				}else{
					this.type = 1
					this.title = '添加车辆'
					this.carNumber = ''
				}
				this.$refs.popup.open()
			},
			//点击保存
			handleYes(){
				if(this.carNumber == ''){
					uni.showToast({
						icon:'none',
						title:'请输入车牌'
					})
				}else{
					if(this.type == 1){
						addCar({carNumber:this.carNumber}).then(res=>{
							if(res.code == 200){
								uni.showToast({
									icon:'success',
									title:'添加成功'
								})
								this.getcarList()
								this.$refs.popup.close()
							}
						})
					}else{
						let params = {
							id:this.id,
							carNumber:this.carNumber
						}
						editCar(params).then(res=>{
							if(res.code == 200){
								uni.showToast({
									icon:'success',
									title:'修改成功'
								})
								this.getcarList()
								this.$refs.popup.close()
							}
						})
					}
				}
				
			}
		}
	}
</script>

<style lang="less">
	.cont {
		width: 702rpx;
		height: 122rpx;
		background: #F5F5F5;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		.c{
			margin: 0 auto;
			display: flex;
			align-items: center;
			color: #5070E9;
			font-size: 28rpx;
			.icon{
				width: 48rpx;
				height: 48rpx;
				border: 1px dashed #5070E9;
				border-radius: 6rpx;
				text-align: center;
				line-height: 66rpx;
				margin-right: 10rpx;
				image{
					width: 38rpx;
					height: 38rpx;
				}
			}
		}
		

	}
	.carInfo{
		display: flex;
		width: 702rpx;
		height: 122rpx;
		background: #F5F5F5;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 20rpx auto;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		.text{
			font-weight: bold;
			font-size: 32rpx;
			color: #5070E9;
		}
		.car_flex{
			display: flex;
			align-items: center;
			.t{
				font-size: 24rpx;
				color: #797979;
				font-style: normal;
				text-transform: none;
				display: flex;
				align-items: center;
				.icon{
					margin-right: 4rpx;
				}
			}
		}
	}
	.tc{
		background-color: #ffffff;
		width: 100%;
		height: 1000rpx;
		.titles{
			font-size: 34rpx;
			color: #000000;
			font-weight: bold;
			position: fixed;
			top: 20rpx;
			transform: translateX(-50%);
			left: 50%;
		}
		.flexs{
			width: 702rpx;
			height: 98rpx;
			background: #F5F5F5;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			position: fixed;
			top: 100rpx;
			transform: translateX(-50%);
			left: 50%;
			padding: 0rpx 24rpx;
			box-sizing: border-box;
			justify-content: space-between;
			.ts{
				font-size: 26rpx;
				color: #797979;
			}
		}
	}
	.btns{
		width: 702rpx;
		height: 80rpx;
		position: fixed;
		transform: translateX(-50%);
		left: 50%;
		bottom: 60rpx;
		background: linear-gradient(#5070E9 0%, #598DFD 100%);
		color: #ffffff;
		border-radius: 49rpx;
		text-align: center;
		line-height: 80rpx;
	}
</style>